define(['jq', 'common'], () => {
    //首部复用
    $('header').load('../html/header.html')
    //尾部复用
    $('footer').load('../html/footer.html')

    setTimeout(() => {

        //加减购物车
        class Detail {
            constructor() {
                this.main = document.querySelector('main')
                this.sub = document.querySelector('.sub')
                this.add = document.querySelector('.add')
                this.input = document.querySelector('input')
                this.btn1 = document.querySelectorAll('button')[0]
                this.btn2 = document.querySelectorAll('button')[1]
                this.option = document.querySelector('.option')
                this.em = document.querySelector('em')
                this.detail = document.querySelector('.detail')
                this.bottom = document.querySelector('.wrap .bottom')
                this.data = JSON.parse(localStorage.getItem('detail'))
                this.datas = JSON.parse(localStorage.getItem('cart')) || []
                this.detailId = this.data.goods_id
                // console.log(this.detailId);
                this.init()
                this.input = document.querySelectorAll('input')[1]
            }
            init() {
                this.share()
                this.render()
                this.count()
                
            }
            share() {
                console.log(this.data);
                $('.head-title>.container').html(`<a href="../index.html">首页</a><span class="iconfont icon-lunboyoufangun"></span>
                <a href="list.html">限时秒杀</a><span class="iconfont icon-lunboyoufangun"></span>
                <span class="title">${this.data.title}</span>`)
                $('.smallBox').html(`<img src="${this.data.img_big_logo}"><span></span>`)
                $('.bigBox').html(`<img src="${this.data.img_big_logo}">`)
                let arr = this.data.images
                $('.bottom>img:eq(0)').attr('src', arr[0])
                $('.bottom>img:eq(1)').attr('src', arr[1])
                $('.bottom>img:eq(2)').attr('src', arr[2])
                $('.bottom>img:eq(3)').attr('src', arr[3])
                $('.bottom>img:eq(4)').attr('src', arr[4])
            }
          
            render() {
                this.detail.innerHTML += `
                    <div>
                    <p>${this.data.title}</p>
                    <p>【现货速发 : 限量赠华为经典耳机+学生认证减50元】点击了解更多手机&gt;&gt;</p>
                    <p>价&emsp;&emsp;格<span class="current"><small>¥</small>${this.data.current_price}</span><span
                            class="previous">¥${this.data.price}</span></p>
                    <p>促&emsp;&emsp;销<span>分期免息</span>银联、花呗、掌上生活、工行分期支付可享免息（免息活动适用于单款免息商品订单，含...<br><br>
                        &emsp;&emsp;&emsp;&emsp;<span>赠送积分</span>购买即赠商城积分，积分可抵现~
                    </p>
                    <p>选择颜色 <span>曜金黑</span><span>普罗旺斯</span><span>环境森林</span><span>10号色</span></p>
                    <p>选择版本 <span>256GB</span><span>128GB</span></p>
                    <p>选择套餐 <span>单品</span><span>运动健康套餐</span></p>
                    <p>销售类型 <span>全款购买</span></p>
                    <p>保障服务
                        <select name="" id="">
                            <option>屏碎服务宝一年 ¥299</option>
                            <option>屏碎(含后盖)服务宝一年 ¥399</option>
                        </select>
                        <select name="" id="">
                            <option>延长服务宝一年 ¥198</option>
                        </select>
                    </p>
                    <p>已选择商品:&nbsp;&nbsp;<span class="option">曜金黑 / 256GB / 单品 / 全款购买</span></p>
                </div>
                <table>
                    <tr>
                        <td>数&emsp;&emsp;量</td>
                        <td class="sub">-</td>
                        <td><input type="text" value="1"></td>
                        <td class="add">+</td>
                    </tr>
                </table>
                <button class="addTo" data-id=${this.data.goods_id}>加入购物车</button><button class="buy" data-id=${this.data.goods_id}>立即下单</button>
                    `
                this.addEvent()
            }

            addEvent() {
                this.detail.addEventListener('click', (e) => {
                    let target = e.target || e.srcElement
                    // 商品数量增加
                    if (target.className == 'add') {
                        // 获取所对应的id
                        let id = this.detailId
                        // 获取所对应的id所对应的商品
                        let goods = this.data
                        // console.log(goods);
                        if (this.input.value == this.data.goods_number) {
                            alert('亲，库存只有这么多了')
                            return false
                        }
                        this.input.value++
                    }
                    // 商品数量减少
                    if (target.className == 'sub') {
                        // 获取所对应的id
                        let id = this.detailId
                        // 获取所对应的id所对应的商品
                        let goods = this.data
                        // console.log(goods);
                        if (this.input.value == 1) {
                            return false
                        }
                        this.input.value--
                    }
                    //加入购物车
                    if(target.className == 'addTo'){
                        let value = Number(this.input.value)
                        let targetId = target.dataset.id
                        let goods = this.data
                        let user = getCookie('username')
                        if(user){
                            if(this.datas.length > 0){
                                let result = this.datas.some((item) => {
                                    return item.goods_id == targetId
                                })
                                if (result) {
                                    let index = this.datas.findIndex((item) => {
                                        return item.goods_id == targetId
                                    })
                                    console.log('ssss',this.datas[index])
                                    this.datas[index].cart_number += value
                                    if (goods.cart_number > goods.goods_number) {
                                        alert('库存不足')
                                    }
                                } else {
                                    goods.cart_number = value
                                    this.datas.push(goods)
                                }
                            }else {
                                goods.cart_number = value
                                this.datas.push(goods)
                            }
                            console.log(goods.cart_number);
                            localStorage.setItem('cart',JSON.stringify(this.datas))
                            this.count()
                        }else{
                            alert('请先登录！')
                            location.href = '../html/login.html'
                        }
                        
                    }
                    
            })

            }
            count() {
                // let list = JSON.parse(localStorage.getItem('cart')) || []
                let count = 0
                this.datas.map((item) => {
                    count += item.cart_number
                })
                this.em.innerHTML = count
            }
            //计算数量
            // totalNum() {
            //     let list = JSON.parse(localStorage.getItem('detail')) || []
            //     let num = 0
            //     this.datas.forEach(item => {
            //         num += item.cart_number
            //     })
            // }
        }
        new Detail()

        // 放大镜
        class Lens {
            constructor() {
                this.smallBox = document.querySelector('.smallBox')
                this.bigBox = document.querySelector('.bigBox')
                this.mask = document.querySelector('.smallBox>span')
                this.pic2 = document.querySelector('.smallBox>img')
                this.pic = document.querySelector('.bigBox>img')
                this.choose = document.querySelectorAll('.bottom>img')
                this.data = JSON.parse(localStorage.getItem('detail'))
                this.arrPic = this.data.images
                // this.arrPic = ['../img/ph1.webp', '../img/ph2.webp', '../img/ph3.webp', '../img/ph4.webp', '../img/ph5.webp']
                this.pic2.src = this.arrPic[0]
                this.pic.src = this.arrPic[0]
                this.init()
            }
            init() {
                this.over()
                this.out()
                this.move()
            }

            over() {
                for (let i = 0; i < this.arrPic.length; i++) {
                    this.choose[i].onmouseover = () => {
                        this.pic2.src = this.arrPic[i]
                        this.pic.src = this.arrPic[i]
                    }
                }
                this.smallBox.onmouseover = () => {
                    this.mask.style.display = 'block'
                    this.bigBox.style.display = 'block'
                }
            }
            out() {
                this.smallBox.onmouseout = () => {
                    this.mask.style.display = 'none'
                    this.bigBox.style.display = 'none'
                }
            }
            move() {
                this.smallBox.onmousemove = (e) => {
                    let x = e.pageX - this.mask.offsetWidth / 2 - this.smallBox.offsetParent.offsetLeft
                    let y = e.pageY - this.mask.offsetHeight / 2 - this.smallBox.offsetParent.offsetTop
                    // console.log(x,y);
                    if (x <= 0) {
                        x = 0
                    } else if (x >= this.smallBox.offsetWidth - this.mask.offsetWidth) {
                        x = this.smallBox.offsetWidth - this.mask.offsetWidth
                    }
                    if (y <= 0) {
                        y = 0
                    } else if (y >= this.smallBox.offsetHeight - this.mask.offsetHeight) {
                        y = this.smallBox.offsetHeight - this.mask.offsetHeight
                    }
                    this.mask.style.left = x + 'px'
                    this.mask.style.top = y + 'px'
                    //计算比例
                    let w = x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
                    let h = y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
                    // console.log(w,h);
                    //让大图进行移动
                    this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
                    this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'

                }
            }
        }
        new Lens()

    }, 400)
})